<template>
  <div class="box">
    <div class="signinleft">
      <div class="diyihang">
        <a href="" class="tupiana">
          <img src="../assets/112.png" alt="" class="tuxianga"
        /></a>
        <div class="touxiang">
          <span>用户剁椒鱼头</span>
        </div>
      </div>
      <div class="signinright">
        <div class="tuxia">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-qiandao"></use>
          </svg>
          <router-link to="/a/a">每日签到</router-link>
        </div>
        <div class="tuxia">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-choujiang"></use>
          </svg>
          <router-link to="/a/b">幸运抽奖 </router-link>
        </div>
        <div class="tuxia">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fuli"></use>
          </svg>
          <router-link to="/a/c">福利兑换 </router-link>
        </div>
        <div class="tuxia">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouhuo"></use>
          </svg>
          <router-link to="/a/d"> 我的收获 </router-link>
        </div>
      </div>
    </div>
    <div class="signinyou">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import "../assets/iconfont.js";


export default {
  name: "About",
  data() {
    return {
      qiandaoo: "qiandaoo",
    };
  },
  components: {},
};
</script>

<style lang="less" scoped>
.box {
  margin: 0 auto;
  width: 1145.2px;
  height: 735.2px;
  display: flex;
}
.signinleft {
  width: 230px;
  height: 623px;
 /*  border: 1px solid red; */
  text-align: center;
}
.diyihang {
  display: flex;
  margin-left: 16px;
}
.tupiana {
  height: 50px;
  width: 50px;
  margin-top: 16px;
  margin-left: 10px;
}
.touxiang {
  width: 120px;
  height: 51.2px;
  line-height: 51.2px;
  margin-top: 20px;
  display: block;
}
.tuxianga {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.signinright {
  width: 230px;
  height: 432px;
  margin-top: 50px;
}
.tuxia {
  width: 160px;
  height: 48px;
  margin-right: 70px;
}
.signinyou {
  width: 900px;
  height: 900px;
 /*  border: 1px solid red; */
}
.active_dd {
  background: white;
  color: #2590ff;
}
</style>

